<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/25
  Time: 12:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
<%--    提示：如果你使用 jQuery 语法，切记引入 js 文件，不然会失效的--%>
    <script src="/js/jquery.js"></script>
    <style>
        div {
            width: 400px;
            margin: 1em auto;
            padding: 10px;
            background: #eee;
            text-align: center;
        }
        label {
            display: flex;
        }
        label span {
            width: 150px;
        }
    </style>
    <script type="text/javascript">
        // 页面加载完成之后
        $(function () {
        // 给验证码的图片绑定单击事件
            $("#code_img").click(function () {
                // 在事件响应的 function 函数中有一个 this 对象。这个 this 对象，是当前正在响应事件的 dom 对象
                // src 属性表示验证码 img 标签的图片路径。它可读，可写
                // alert(this.src);
                // 在验证后面加了一个当前时间
                this.src = "/kaptcha.jpg?d" + new Date();
            });
        })
    </script>
</head>
<body>

    <div>
        <h3>注册页面</h3>
<%--        ${pageContext.request.contextPath} 是绝对路径--%>
        <form action="${pageContext.request.contextPath}/book/register" method="post">
            <label><span>用户名</span><input name="username"></label><br>
            <label><span>密码</span><input name="password" type="password"></label><br>
            <label>
                <span>性别</span>
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </label><br>
            <label><span>邮箱</span><input name="email"></label><br>
            <label>
                <span>验证码</span>
                <input id="aaa" type="text" name="code" style="width: 80px;">&nbsp;&nbsp;&nbsp;
                <img id="code_img" src="/kaptcha.jpg" style="width: 80px; height: 28px;">
            </label><br>
            <button>点击注册</button>
        </form>

<%--        a 标签跳转到主页面--%>
        <a href="/book/list">返回首页</a>
    </div>

<%--    页脚--%>
    <%@include file="/footer.jsp"%>
</body>
</html>
